.doc-thumbnail {
  @apply relative flex w-12 shrink-0 overflow-hidden;

  // Outer border / shadow
  &::after {
    content: "";
    @apply pointer-events-none absolute z-[1];
    // Make the element 1px smaller than its container
    // so its shadow picks up colors from the elements below it.
    @apply top-px right-px bottom-px left-px;
    @apply rounded-sm shadow-surface-low;
  }

  .status-icon {
    @apply absolute opacity-75 mix-blend-multiply;
    @apply h-9 w-9;

    &.approved {
      @apply -rotate-6 fill-color-palette-green-200;
      @apply -right-[7px] top-[5px];
    }

    &.obsolete {
      @apply fill-color-palette-neutral-300 opacity-60;
      @apply -left-[8px] top-[3px];
    }
  }

  .product-badge {
    @apply rounded-tl-none rounded-br-none rounded-bl rounded-tr;
  }

  &.obsolete {
    .product-badge {
      @apply bg-gradient-to-br from-color-palette-neutral-300 to-color-palette-neutral-400 text-color-palette-neutral-50;
    }
  }

  &.medium {
    @apply w-[72px];

    .status-icon {
      @apply h-[52px] w-[52px];

      &.approved {
        @apply -right-2 top-1;
      }

      &.obsolete {
        @apply top-[3px] -left-2.5;
      }
    }
  }

  &.large {
    @apply w-28;

    &::after {
      @apply rounded shadow-surface-mid;
    }

    .product-badge {
      @apply rounded-bl rounded-tr;
    }

    .status-icon {
      @apply top-[8px] h-[84px] w-[84px];

      &.approved {
        @apply -right-3.5;
      }

      &.obsolete {
        @apply -left-5;
      }
    }
  }
}
